<template>
  <div class="ele-body">
    <el-row type="flex" justify="center">
      <el-col :span="18">
        <el-card style="padding:10px">
          <el-form
            ref="vulnForm"
            :rules="vulnFormRules"
            :model="editForm"
            label-width="100px"
            @submit.native.prevent
          >
            <el-form-item label="漏洞名称:" prop="name">
              <el-input
                v-model="editForm.name"
                placeholder="漏洞名称"
                clearable
              />
            </el-form-item>
            <el-form-item label="漏洞类型:" prop="type">
              <el-select
                v-model="editForm.type"
                placeholder="请选择漏洞类型"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, key) in typeList"
                  :key="'type' + key"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="漏洞等级:" prop="level">
              <el-select
                v-model="editForm.level"
                placeholder="请选择漏洞等级"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, key) in levelList"
                  :key="'type' + key"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="绑定资产:" prop="asset_get">
              <el-select
                v-model="editForm.asset_get"
                placeholder="请选择绑定资产"
                style="width: 100%"
                multiple
                filterable
                remote
                reserve-keyword
                :remote-method="remoteMethod"
                :loading="loading"
              >
                <el-option
                  v-for="item in assetList"
                  :key="'asset' + item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="漏洞简介:">
              <el-input v-model="editForm.introduce" type="textarea" rows="5" />
            </el-form-item>
            <el-form-item label="漏洞详情:">
              <tinymce-editor v-model="editForm.info" />
            </el-form-item>
            <el-form-item label="修复方法:">
              <tinymce-editor v-model="editForm.fix" />
            </el-form-item>
            <el-form-item class="ele-text-right">
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TinymceEditor from '@/components/TinymceEditor'
import { vulnType, vulnLevel, vulnAsset } from '@/api/vuln'
export default {
  name: 'VulnEditForm',
  components: {
    TinymceEditor
  },
  data() {
    return {
      editForm: {},
      typeList: [],
      levelList: [],
      assetList: [],
      vulnFormRules: {
        name: [
          { required: true, message: '请输入漏洞名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择漏洞类型', trigger: 'change' }
        ],
        level: [
          { required: true, message: '请选择漏洞等级', trigger: 'change' }
        ],
        asset_get: [
          { required: true, message: '请选择绑定资产', trigger: 'blur' }
        ]
      },
      loading: false,
      id: ''
    }
  }, mounted() {
    this._vulnType()
    this._vulnLevel()
    this._assetList()
  },
  methods: {
    /* 提交 */
    onSubmit() {
      const assetArr = this.editForm.asset_get.toString()
      const formData = Object.assign(this.editForm, {})
      formData.asset_get = assetArr
      this.$http.post('/vuln/vuln/create/', formData).then(res => {
        if (res.data.code === 0) {
          this.$message({ type: 'success', message: '创建漏洞成功' })
          this.$router.push('/vuln/list')
        } else {
          this.$message({ type: 'error', message: res.data.msg })
        }
      })
    },
    _vulnType() {
      vulnType().then(res => {
        this.typeList = res.data.data
      })
    },
    _vulnLevel() {
      vulnLevel().then(res => {
        this.levelList = res.data.data
      })
    },
    /* 资产绑定远程搜索 */
    async remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        await this._assetList(query)
        this.loading = false
      } else {
        await this._assetList()
      }
    },
    /* 获得漏洞资产选项 */
    async _assetList(key) {
      const aResp = await vulnAsset(key)
      this.assetList = aResp.data.data
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
